@import '../../../../common/variables.less';

.visualComponents{
  .el-select .el-input .el-select__caret.el-icon{
    margin-left: 0;
  }
}

.visualComponents_body_theme_dark{
  .el-select-dropdown{
    background-color: @droplist_bg_color_dark;
    border-color: @droplist_border_color_dark;
  }
  
  .el-select-dropdown__list {
    .el-select-dropdown__item {
      color: @darkThemeFontColor;
      background-color: @darkThemeBgColor;
      &:hover {
        background-color: @darkThemeSelectOptionsHoverBgColor;
      }
      &.is-disabled{
        &:hover{
          background-color: @darkThemeBgColor;
        }
      }
    }
    .selected {
      color: @darkThemeActiveFontColor;
      background-color: @darkThemeSelectOptionsHoverBgColor;
    }
  }
  .el-select-dropdown.is-multiple {
    .el-select-dropdown__item.selected,
    .el-select-dropdown__item.selected.hover {
      color: @darkThemeActiveFontColor;
      background-color: @darkThemeSelectOptionsHoverBgColor;
    }
  }
  .popper__arrow {
    border-bottom-color: @darkThemeBorderColor !important;
    border-top-color: @darkThemeBorderColor !important;
    &::after {
      border-bottom-color: @darkThemeBgColor !important;
      border-top-color: @darkThemeBgColor !important;
    }
  }
  .el-select-dropdown__empty {
    color: @darkThemeFontColor;
  }

  .el-popper{
    background-color: @droplist_bg_color_dark;
    border-color: @droplist_border_color_dark;
    .el-popper__arrow::before{
      background-color: @droplist_bg_color_dark;
      border-color: @droplist_border_color_dark;
    }
  }
}

